<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div
    class="flex w-full h-full flex-wrap justify-between"
    :style="{
      paddingLeft: info.extension.paddingLeft.value + 'px',
      paddingRight: info.extension.paddingLeft.value + 'px',
      paddingTop: info.extension.paddingTop.value + 'px',
      paddingBottom: info.extension.paddingTop.value + 'px',
    }"
  >
    <div v-for="(item, index) in cardList.slice(0, 4)" :key="index" class="card flex items-center">
      <div
        class="icon"
        :style="{
          background: colors[index % colors.length],
        }"
      >
        <i :class="icons[index % icons.length]"></i>
      </div>
      <div class="flex-1">
        <div class="w-full flex justify-end name mb-4">{{ item.name }}</div>
        <div class="w-full flex items-end num justify-end">
          <span>{{ item.value }}</span>
          种
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'CardGroup',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        inter: null,
        colors: ['#0AA1FB', '#FDAF01', '#2AE997', '#B540FD'],
        icons: ['ri-briefcase-2-fill', 'ri-calculator-line', 'ri-logout-box-line'],
        infoComponent: {},
        cardList: [],
      }
    },
    watch: {
      'info.extension': {
        handler() {
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
            // this.initChart()
          })
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      this.$nextTick(() => {
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        this.$request(this.infoComponent.extension.requestSet.value, (res) => {
          this.infoComponent.extension.requestSet.value['resList'].map((item) => {
            this.cardList = this.$getResponseData(res, item)
          })
        })
      },
    },
  })
</script>
<style>
  .cardGroup {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>
<style lang="scss" scoped>
  .card {
    width: 48%;
    height: 45%;
    box-shadow: 0 0 30px 10px #00067d inset;
    border-radius: 10px;
    padding: 0 20px;
    .icon {
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 15px;
      border-radius: 50%;
    }
    .name {
      color: #fff;
      font-size: 20px;
    }
    .num {
      font-size: 15px;
      color: #0af7d4;
      font-weight: bold;
      span {
        font-size: 30px;
        line-height: 20px;
      }
    }
  }
</style>
